﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>添加领用单</title>
    <link href="../img/icon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
    <link rel="stylesheet" href="../css/reset.css?3123">
    <link rel="stylesheet" href="../css/setlayui.css?12">
    <link rel="stylesheet" href="../css/viewer.min.css">
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
    <script src="../js/viewer.min.js"></script>
</head>

<body>
    <div id="app" class="page-container" style="display: none;" v-show="showApp">
        <div class="content_box">
            <div class="cell_box" style="width:44.7vw;">
                <div class="cell_title">
                    <div class="cell_name">基本信息:</div>
                    <div class="cell_but"></div>
                </div>
                <div class="cell_cont" style="height: 400px;padding: 2.77vh 2.08vw;">
                    <div class="forms_box">
                        <div class="forms_name">领用单号</div>
                        <div class="forms_cont" style="color:#FA7355;">保存后自动生成</div>
                    </div>
                    <div class="forms_box">
                        <div class="forms_name must_input">选择仓库</div>
                        <div class="forms_cont">
                            <el-tooltip class="item" effect="dark" :disabled="!storageName" :content="storageName"
                                placement="top">
                                <el-select @change="ckChange" class="public_input" v-model="storageId"
                                    placeholder="请选择仓库">
                                    <el-option v-for="item in cklist" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-tooltip>

                        </div>
                        <div style="width: 62px;min-width: 62px;"></div>
                    </div>
                    <div class="forms_box">
                        <div class="forms_name">仓库负责人</div>
                        <div class="forms_cont">
                            <el-tooltip class="item" effect="dark" :disabled="!chargePersonName"
                                :content="chargePersonName" placement="top">
                                <el-input disabled class="public_input" placeholder="" v-model="chargePersonName">
                                </el-input>
                            </el-tooltip>
                        </div>
                        <div style="width: 62px;min-width: 62px;"></div>
                    </div>
                    <div class="forms_box">
                        <div class="forms_name must_input">领用人</div>
                        <div class="forms_cont">
                            <el-tooltip class="item" effect="dark" :disabled="!receiver" :content="receiver"
                                placement="top">
                                <el-input disabled class="public_input white_input" placeholder="请选择领用人"
                                    v-model="receiver"></el-input>
                            </el-tooltip>
                        </div>
                        <div class="forms_but">
                            <el-button @click="chioseReceiver" class="border_but" type="primary">选择</el-button>
                        </div>
                    </div>
                    <div class="forms_box">
                        <div class="forms_name must_input">领用时间</div>
                        <div class="forms_cont">
                            <el-date-picker v-model="receiverTime" type="date" format="yyyy-MM-dd HH:mm"
                                value-format="yyyy-MM-dd HH:mm" class="public_input" placeholder="选择日期">
                            </el-date-picker>
                        </div>
                        <div style="width: 62px;min-width: 62px;"></div>
                    </div>
                    <div class="forms_box">
                        <div class="forms_name">备注</div>
                        <div class="forms_cont">
                            <el-tooltip class="item" effect="dark" :disabled="!remark" :content="remark"
                                placement="top">
                                <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="remark"> </el-input>
                            </el-tooltip>
                        </div>
                        <div style="width: 62px;min-width: 62px;"></div>
                    </div>
                </div>
            </div>
            <div class="cell_box" style="float: right;width:46.09vw;">
                <div class="cell_title">
                    <div class="cell_name">领用照片:</div>
                    <div class="cell_but"></div>
                </div>
                <div class="cell_cont" style="height: 400px;overflow: auto;padding-bottom: 20px;">
                    <div class="file_item">
                        <el-upload action="##" accept="image/*" list-type="picture-card" :show-file-list="false"
                            :http-request="httprequest" multiple>
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </div>
                    <div class="file_item" v-for="(item, index) in lyimgList" :key="index"
                        style="border: 2px solid #999999;">
                        <img :src="item.fileurl" alt="">
                        <div class="file_mask">
                            <div @click="prevewImg(item.filename, item.fileurl)" class="el-icon-zoom-in"></div>
                            <div @click="downImg(item.filename, item.fileurl)" class="el-icon-download"
                                style="margin: 0 20px;"></div>
                            <div @click="removeImg(lyimgList, index)" class="el-icon-delete"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cell_box" style="width: 100%;height: calc(100% - 452px);padding-top: 20px;min-height: 286px;">
                <div class="cell_title">
                    <div class="cell_name">领用明细:</div>
                    <div class="cell_but">
                        <el-button @click="chioseClmx" class="border_but" type="primary">新增</el-button>
                    </div>
                </div>
                <div class="cell_cont" style="padding: 2.77vh 2.08vw;height: calc(100% - 52px);">
                    <div class="table_box border_table_box" style="height: 100%;">
                        <el-table :data="clmxList" height="100%" border style="width: 100%">
                            <el-table-column prop="goodsshelvesid" align="center" min-width="100" show-overflow-tooltip
                                label="所在货架">
                                <template slot-scope="scope">
                                    <div class="table_input" v-if="scope.row.isAdd">
                                        <el-select @change="hjChange(scope.row.goodsshelvesid, scope.row)"
                                            class="public_input" style="height: 24px;"
                                            v-model="scope.row.goodsshelvesid" placeholder="请选择">
                                            <el-option v-for="(item, index) in hjList" :key="index"
                                                :label="item.goodsshelvesnumber" :value="item.goodsshelvesid">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <span v-if="!scope.row.isAdd">{{scope.row.goodsshelvesid}}</span>
                                </template>
                            </el-table-column>
                            <!--materialList-->
                            <el-table-column prop="materialSpecId" align="center" min-width="100" show-overflow-tooltip
                                label="材料名称规格">
                                <template slot-scope="scope">
                                    <div class="table_input" v-if="scope.row.isAdd">
                                        <el-select @change="materialNameSpecChange(scope.row)" class="public_input"
                                            style="height: 24px;" v-model="scope.row.materialSpecId" placeholder="请选择">
                                            <el-option v-for="(item, index) in scope.row.materialSpecList" :key="index"
                                                :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <span v-if="!scope.row.isAdd">{{scope.row.goodsshelvesid}}</span>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column prop="materialName" align="center" min-width="100" show-overflow-tooltip
                                label="材料名称"></el-table-column> -->
                            <!-- <el-table-column prop="specs" align="center" show-overflow-tooltip label="规格"
                                min-width="70">
                            </el-table-column> -->

                            <el-table-column prop="AccountNum" align="center" show-overflow-tooltip label="账存数量"
                                min-width="100">
                            </el-table-column>

                            <el-table-column align="center" show-overflow-tooltip label="领用数量" width="160">
                                <template slot-scope="scope">
                                    <div class="table_input" v-if="scope.row.isAdd">
                                        <el-input @change="lyinpuChange(scope.row)" placeholder="请输入内容" type="number"
                                            v-model="scope.row.collectNum" clearable></el-input>
                                    </div>
                                    <span v-if="!scope.row.isAdd">{{scope.row.collectNum}}</span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="materialUnit" align="center" show-overflow-tooltip label="单位"
                                min-width="70">
                            </el-table-column>

                            <el-table-column align="center" show-overflow-tooltip label="操作" width="106">
                                <template slot-scope="scope">
                                    <el-button @click="removeImg(clmxList, scope.$index, 1)" v-if="scope.row.isAdd"
                                        type="text">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <div class="but_box">
            <el-button class="cancelClass" @click="cancels">取消</el-button>
            <el-button type="primary" @click="confirms" style="margin-left: 120px">提交</el-button>
        </div>
        <ul id="jq22" style="opacity: 0;height: 0;overflow: hidden;">
            <li v-for="(item, index) in previewList" :key="index"><img :src="item" /></li>
        </ul>
    </div>
    <script src="../js/FileSaver.js"></script>
    <script src="../js/public.js?12345"></script>
    <script>
        var layer = layui.layer
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    showApp: false,
                    previewList: [],
                    receiver: '',
                    receiverTime: '',
                    chargePersonID: '',
                    chargePersonName: '',
                    remark: '',
                    storageId: '',
                    storageName: '',
                    projectId: '',
                    lyimgList: [],
                    clmxList: [],
                    clkcObj: {},
                    cklist: {},
                    hjList: [],
                    totalnum: 0,
                    isRequestFlag: false,
                    // 当前选择仓库下的货架列表
                    // curStorageShelves: []
                };
            },
            methods: {
                materialNameSpecChange(item) {

                    var data = item.detail;
                    var mid = item.materialSpecId.split("-")[0];
                    var sid = item.materialSpecId.split("-")[1];

                    var arr = data.filter(function (item) {
                        if (item.materialid === mid) {

                            if (!sid) {
                                return true
                            } else if (sid === item.specsid) {
                                return true
                            }
                        }
                    });
                    if (arr.length > 0) {
                        var targetItem = arr[0];
                        console.log(targetItem)
                        item.materialName = targetItem.materialname;
                        item.materialId = targetItem.materialid;
                        item.AccountNum = targetItem.count;
                        item.collectNum = targetItem.count;
                        item.materialUnit = targetItem.unit;
                        item.specs = targetItem.specificationname;
                        item.specsID = targetItem.specsid;
                        console.log(item)
                        this.$forceUpdate();
                    }
                },


                // 仓库选择完毕 更新对应仓库下的货架列表
                ckChange(val) {
                    for (var i = 0; i < this.cklist.length; i++) {
                        if (this.cklist[i].id == val) {
                            this.storageName = this.cklist[i].name
                        }
                    }
                    this.clmxList = [];
                    this.getCurStorageShelves();
                    this.getCurStoragePerson();
                    // this.getHjData()
                },

                // 获取当前仓库下的货架列表
                getCurStorageShelves() {
                    var that = this;
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/GetGoodsShelvesDataByStorage',
                        data: {
                            storageId: that.storageId,
                            hasMaterial: 1
                        },
                        dataType: 'json',
                        success: function (res) {

                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.hjList = res.data;
                        }
                    });
                },
                // 获取当前仓库下的管理员信息
                getCurStoragePerson() {
                    var that = this;
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/GetStorageInfo',
                        data: {
                            storageId: that.storageId
                        },
                        dataType: 'json',
                        success: function (res) {
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            else if (res.data.length > 0) {
                                that.chargePersonID = res.data[0].personinchargecode
                                that.chargePersonName = res.data[0].personinchargename
                            }
                        }
                    });
                },
                chioseReceiver() {
                    var that = this
                    parent.$('#publicValue').val('')
                    parent.layer.open({
                        type: 2,
                        title: '选择领用人',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['65%', '77.77%'],
                        content: '/ApsPublic/publicList/receiverList.html?isSingle=1&projectId=' + that.projectId + '&' + new Date().getTime(),
                        end: function () {
                            setTimeout(function () {
                                if (parent.$('#publicValue').val()) {
                                    var newList = JSON.parse(parent.$('#publicValue').val())
                                    that.receiver = newList[0].ryxm;
                                }
                            }, 10)
                        }
                    });
                },
                // hjChange
                hjChange(shelvesId, row) {
                    // 获取当前仓库当前货架下的材料列表
                    var that = this;
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/material/GetMaterialDataByGoodsShelves',
                        data: {
                            projectId: that.projectId,
                            storageId: that.storageId,
                            goodsShelves: shelvesId,
                        },
                        dataType: 'json',
                        success: function (res) {

                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            var arr = that.hjList.filter(function (item) {
                                return item.goodsshelvesid === shelvesId;
                            });
                            row.goodsshelvesnumber = arr[0].goodsshelvesnumber;


                            var materialSpecList = [];
                            res.data.forEach(function (item, index) {
                                var materialItem = {
                                    label: item.materialname + item.specificationname,
                                    value: item.materialid + "-" + item.specsid
                                };
                                materialSpecList.push(materialItem);
                            });
                            that.$nextTick(function () {
                                // 核心清空
                                //         materialId: "",
                                // materialName: "",
                                // specsID: "",
                                // specs: "",
                                // materialUnit: "",
                                // AccountNum: "",
                                // collectNum: "",
                                row.materialId = "";
                                row.materialName = "";
                                row.AccountNum = "";
                                row.collectNum = "";
                                row.materialUnit = "";
                                row.specs = "";
                                row.specsID = "";
                                row.materialSpecList = materialSpecList;
                                row.detail = res.data;
                                row.materialSpecId = "";
                                console.log(row)
                            })
                            that.$forceUpdate()

                        }
                    });
                },


                // hjChange(item, row) {
                //     var objs = {}
                //     for (var j = 0; j < this.hjList.length; j++) {
                //         if (item == this.hjList[j].typeid) {
                //             objs = JSON.parse(JSON.stringify(this.hjList[j]))
                //         }
                //     }
                //     row.oper = 'add'
                //     row.isAdd = true
                //     row.number = objs.number
                //     row.typeid = objs.typeid
                //     row.materialId = objs.materialid
                //     row.materialName = objs.materialname
                //     row.specsId = objs.specificationid
                //     row.specs = objs.specificationname
                //     row.materialUnit = objs.unit
                //     row.accountNum = objs.count
                //     row.collectNum = objs.count
                //     for (var j = 0; j < this.hjList.length; j++) {
                //         this.hjList[j].isdash = false
                //         for (var i = 0; i < this.clmxList.length; i++) {
                //             if (this.hjList[j].typeid == this.clmxList[i].typeid) {
                //                 this.hjList[j].isdash = true
                //             }
                //         }
                //     }
                //     this.$forceUpdate()
                // },
                lyinpuChange(row) {
                    if (parseInt(row.collectNum) < 0) {
                        row.collectNum = 0;
                    }
                    if (parseFloat(row.collectNum) > parseFloat(row.AccountNum)) {
                        row.collectNum = parseFloat(row.AccountNum)
                    }
                    row.collectNum = parseFloat(row.collectNum).toFixed(2);
                },
                chioseClmx() {

                    if (!this.storageId) {
                        this.$message({
                            message: '请选择仓库',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (this.hjList.length === 0) {
                        this.$message({
                            message: '当前仓库下暂无货架可选',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }

                    // 当前仓库下当前货架下材料请求
                    // this.getCurStorageCurShelvesMaterialList();
                    this.clmxList.push({
                        oper: 'add',
                        isAdd: true,
                        goodsshelvesid: "",
                        goodsshelvesnumber: "",
                        materialId: "",
                        materialName: "",
                        specsID: "",
                        specs: "",
                        materialUnit: "",
                        AccountNum: "",
                        collectNum: "",
                        materialSpecList: []
                    })




                    // if (this.clmxList.length == this.totalnum) {
                    //     this.$message({
                    //         message: '此仓库下无货架可选',
                    //         type: 'warning',
                    //         duration: 1000
                    //     });
                    //     return false
                    // }
                    // var objs = {}
                    // for (var i = this.hjList.length - 1; i >= 0; i--) {
                    //     if (!this.hjList[i].isdash) {
                    //         objs = JSON.parse(JSON.stringify(this.hjList[i]))
                    //     }
                    // }

                    // for (var j = 0; j < this.hjList.length; j++) {
                    //     if (objs.typeid == this.hjList[j].typeid) {
                    //         this.hjList[j].isdash = true
                    //     }
                    // }
                    // this.clmxList.push({
                    //     oper: 'add',
                    //     isAdd: true,
                    //     number: objs.number,
                    //     typeid: objs.typeid,
                    //     materialId: objs.materialid,
                    //     materialName: objs.materialname,
                    //     specsId: objs.specificationid,
                    //     specs: objs.specificationname,
                    //     materialUnit: objs.unit,
                    //     accountNum: objs.count,
                    //     collectNum: objs.count,
                    //     id: objs.id
                    // })
                },
                cancels() {
                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
                },
                confirms() {
                    var that = this
                    if (that.isRequestFlag) {
                        return
                    }
                    var arr = [];
                    for (var i = 0; i < this.clmxList.length; i++) {
                        arr.push(this.clmxList[i].goodsshelvesid + this.clmxList[i].materialId)
                    }
                    if (new Set(arr).size !== arr.length) {
                        this.$message({
                            message: '相同货架不能重复领用相同材料',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (!this.storageId) {
                        this.$message({
                            message: '请选择仓库',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (this.receiver.length == 0) {
                        this.$message({
                            message: '请选择领用人',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (!this.receiverTime) {
                        this.$message({
                            message: '请选择领用时间',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (this.lyimgList.length == 0) {
                        this.$message({
                            message: '请上传领用图片',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (this.clmxList.length == 0) {
                        this.$message({
                            message: '请添加领用明细',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    var imageJson = []
                    for (var i = 0; i < this.lyimgList.length; i++) {
                        imageJson.push(this.lyimgList[i].fileid + ',' + this.lyimgList[i].filename)
                    }
                    var dataList = this.clmxList
                    // 去掉不需要的key
                    var dataJson = [];
                    dataList.forEach(function (item) {
                        dataJson.push({
                            oper: "add",
                            goodsshelvesid: item.goodsshelvesid,
                            number: item.goodsshelvesnumber,
                            materialId: item.materialId,
                            materialName: item.materialName,
                            specsID: item.specsID,
                            specs: item.specs,
                            materialUnit: item.materialUnit,
                            AccountNum: item.AccountNum,
                            collectNum: item.collectNum
                        });
                    });

                    for (var i = 0; i < dataList.length; i++) {
                        var item = dataList[i];
                        if (!item.materialSpecId) {
                            that.$message({
                                message: '请选择有材料的货架',
                                type: 'warning',
                                duration: 1000
                            });
                            return
                        }


                        if (!item.collectNum || item.collectNum === "NaN") {
                            that.$message({
                                message: '请输入领用数量',
                                type: 'warning',
                                duration: 1000
                            });
                            return
                        }
                        if (parseFloat(item.collectNum) === 0) {
                            that.$message({
                                message: '领用数量不能为0',
                                type: 'warning',
                                duration: 1000
                            });
                            return
                        }
                    }

                    that.isRequestFlag = true;
                    xLoading(true, '正在提交')
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/SaveCollectData',
                        data: {
                            projectId: that.projectId,
                            storageName: that.storageName,
                            storageId: that.storageId,
                            receiver: that.receiver,
                            receiverTime: that.receiverTime,
                            chargePersonID: that.chargePersonID,
                            chargePersonName: that.chargePersonName,
                            remark: that.remark,
                            dataJson: JSON.stringify(dataJson),
                            imageJson: imageJson.join('|')
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.isRequestFlag = false;
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.$message({
                                message: '已提交',
                                type: 'success'
                            });
                            setTimeout(function () {
                                that.isRequestFlag = false;
                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                parent.layer.close(index);
                            }, 500)
                        }
                    });
                },
                httprequest(file) {
                    if (getFileType(file.file.name) != 'IMG') {
                        this.$message({
                            message: '只能上传图片',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    var that = this
                    xLoading(true, '正在上传')
                    var formData = new FormData();
                    formData.append('files', file.file);
                    $.ajax({
                        type: 'post',
                        url: baseUrl + '/Common/UploadFile?method=UploadFile&type=OSS',
                        data: formData,
                        dataType: 'json',
                        contentType: false,
                        processData: false,
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg,
                                    type: 'error'
                                });
                                return false;
                            }
                            var newobj = {
                                fileid: res.data.fileId,
                                filename: res.data.fileName,
                                fileurl: res.data.ossUrl,
                                uploadTime: res.data.uploadTime,
                                userName: res.data.userName
                            }
                            that.lyimgList.push(newobj)
                        }
                    });
                },
                prevewImg(filename, urls) {
                    if (getFileType(filename) == 'IMG') {
                        this.previewList = [urls];
                        setTimeout(function () {
                            var viewer = new Viewer(document.getElementById('jq22'), {
                                hide: function () {
                                    viewer.destroy();
                                }
                            });
                            viewer.show();
                        }, 10);
                        return false
                    }
                    if (getFileType(filename) == 'PDF') {
                        parent.layer.open({
                            type: 2,
                            title: 'pdf预览',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['98%', '98%'],
                            content: '/ApsPublic/pdf/web/viewer.html?file=' + encodeURIComponent(urls),
                            end: function () { }
                        });
                        return false
                    }
                    publicdownFile(filename, urls)
                },
                downImg(filename, urls) {
                    publicdownFile(filename, urls)
                },
                removeImg(arr, index, types) {
                    var that = this
                    var title = '此操作将永久删除该文件, 是否继续?'
                    if (types == 1) {
                        title = '此操作将永久删除该数据, 是否继续?'
                    }
                    this.$confirm(title, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        arr.splice(index, 1)
                        if (types == 1) {
                            for (var j = 0; j < that.hjList.length; j++) {
                                that.hjList[j].isdash = false
                                for (var i = 0; i < that.clmxList.length; i++) {
                                    if (that.hjList[j].id == that.clmxList[i].id) {
                                        that.hjList[j].isdash = true
                                    }
                                }
                            }
                        }
                    }).catch(function () {
                    });
                },
                // 获取仓库
                getCkData() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/GetStorageInfos',
                        data: {
                            projectId: that.projectId,
                            isUse: '1'
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            var list = []
                            for (var i = 0; i < res.data.length; i++) {
                                if (res.data[i].type == '1') {
                                    list.push(res.data[i])
                                }
                            }
                            that.storageId = list[0].id
                            that.storageName = list[0].name
                            that.cklist = list
                            // that.getHjData()
                            that.getCurStorageShelves();
                            that.getCurStoragePerson();
                        }
                    });
                },
                // 获取仓库下货架
                getHjData() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/GetGoodsShelvesDataInfos',
                        data: {
                            storageId: that.storageId,
                            type: 1
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            if (res.data.length == 0) {
                                that.$message({
                                    message: '该仓库下无货架，请重新选择仓库',
                                    type: 'warning',
                                    duration: 1000
                                });
                            }
                            that.hjList = []
                            that.clmxList = []
                            that.totalnum = res.data.length
                            for (var i = 0; i < res.data.length; i++) {
                                res.data[i].typeid = i + 1
                            }
                            that.hjList = res.data
                        }
                    });
                }
            },
            mounted() {
                this.showApp = true;
                this.projectId = getQuerys('projectId')
                this.receiverTime = timeFormat(new Date(), 1)
                this.getCkData()
            }
        });
    </script>
</body>
<style>
    .content_box {
        padding: 10px 3.28vw;
        height: calc(100% - 70px);
        overflow: auto;
    }

    .cell_title {
        display: flex;
        align-items: center;
        padding: 10px 0;
        height: 52px;
    }

    .cell_but {
        padding-left: 10px;
    }

    .cell_box {
        float: left;
    }

    .cell_cont {
        border: 1px solid #EBEBEB;
    }

    .forms_box {
        display: flex;
        margin-bottom: 20px;
    }

    .forms_name {
        width: 80px;
        padding-right: 10px;
        text-align: right;
        line-height: 32px;
    }

    .forms_cont {
        line-height: 32px;
        flex: 1;
        padding-right: 10px;
    }

    .el-input.is-disabled .el-input__inner {
        color: #333333;
    }

    .white_input .el-input__inner {
        background: #ffffff !important;
    }

    .file_item {
        margin-left: 20px;
        margin-top: 20px;
        width: 140px;
        height: 140px;
        overflow: hidden;
        border-radius: 5px;
        float: left;
        position: relative;
    }

    .el-upload--picture-card {
        width: 100%;
        height: 100%;
        border-color: #D6D6D6;
        background: #FAFBFC;
    }

    .file_item>div {
        width: 100%;
        height: 100%;
    }

    .file_mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.5s;
    }

    .file_mask>div {
        font-size: 22px;
        color: #fff;
        cursor: pointer;
    }

    .file_item:hover .file_mask {
        opacity: 1;
    }
</style>

</html>